<template>
<div style="width:100%;height:100%">
    <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
    </el-date-picker>
    <el-button type="primary" plain @click="submit">查询</el-button>
    <LineChart :xData="xData" :yData="yData"></LineChart>
</div>
</template>

<script>
import LineChart from "../../components/Line/LineChart.vue";
import { orderordertotalReq } from "../../api/statistics.api.js";
import dayjs from "dayjs";
export default {
  components: {
    LineChart
  },
  data() {
    return {
      xData: [],
      yData: [
        {
          name: "订单量",
          data: []
        }
      ],
      date: []
    };
  },
  methods: {
    submit() {
      const date = JSON.stringify(
        this.date.map(item => dayjs(item).format("YYYY-MM-DD HH:mm:ss"))
      );
      orderordertotalReq(date).then(res => {
        console.log(res);

        //   格式化xdata ydata
        this.xData = res.data.data.map(item =>
          dayjs(item.orderTime).format("MM-DD")
        );
        this.yData[0].data = res.data.data.map(item => item.orderAmount);
        console.log(this.xData, this.yData);
      });
    }
  },
  created() {
    orderordertotalReq().then(res => {
      console.log(res);

      //   格式化xdata ydata
      this.xData = res.data.data.map(item =>
        dayjs(item.orderTime).format("MM-DD")
      );
      this.yData[0].data = res.data.data.map(item => item.orderAmount);
      console.log(this.xData, this.yData);
    });
  }
};
</script>

<style lang="less" scoped>
</style>